<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上商城</title>
    <link rel="stylesheet" th:href="@{~/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{~/js/jquery-3.2.1.min.js}"></script>
    <style>
        .login{
            width: 580px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login text-center">
            <div class="page-header text-primary">
                <h1>登录</h1>
              </div>
            <form class="form-horizontal" id="form" action="http://localhost:8080/preLogin/toPreReg" method="POST">
                <div class="form-group">
                  <label for="uname" class="col-sm-2 control-label">账号：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="uname" name="uname" placeholder="账号">
                      <p id="un" style="color: red;display: none;float: right">请输入合法名称</p>
                      <p id="an" style="color: red;display: none;float: right">账号已经存在</p>
                  </div>
                </div>
                <div class="form-group">
                  <label for="pwd" class="col-sm-2 control-label">密码：</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control" id="pwd" name="password" placeholder="密码">
                  </div>
                </div>
                <div class="form-group">
                  <label for="pwd" class="col-sm-2 control-label">确认密码：</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control" id="repwd" name="repassword" placeholder="确认密码">
                    <p id="msg" style="color: red;display: none;float: right">确认秘密码不一致</p>
                  </div>
                </div>
                <div class="form-group">
                  <label for="pwd" class="col-sm-2 control-label">手机号：</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号">
                      <p id="mm" style="color: red;display: none;float: right">请输入正确的手机号</p>
                  </div>
                </div>
                  <div class=" col-sm-6">
                    <button type="submit" id="sub" class="btn btn-primary">注册</button>
                  </div>
                <p th:if="${msg!=null}" th:text="${msg}">123</p>
            </form>
        </div>
    </div>
    <script>
        $(function(){
            var ajax=false;
            function check(){
                var pwd = $("#pwd").val();
                var repwd = $("#repwd").val();
                var uname = $("#uname").val();
                var phone = $("#phone").val();
                var reg = /^1[3|4|5|7|8][0-9]{9}$/
                if(pwd != repwd||pwd==""){
                    $("#msg").css("display","block");
                    return false;
                }
                if(reg.test(phone)||phone==""){
                    $("#mm").css("display","block");
                    return false;
                }
                if(uname.length==0||uname.length>10){
                    $("#un").css("display","block")
                    return false;
                }
                if(!ajax){
                    return false;
                }
                return true;
            }
            $("#repwd").blur(function(){
                var pwd = $("#pwd").val();
                var repwd = $("#repwd").val();
                if(pwd != repwd){
                    console.log(pwd)
                    $("#msg").css("display","block");
                }
            })
            $("#repwd").focus(function(){
                $("#msg").css("display","none");
            })
            $("#phone").focus(function(){
                $("#mm").css("display","none");
            })
            $("#uname").focus(function(){
                $("#an").css("display","none");
                $("#un").css("display","none");
            })
            $("#repwd").focus(function(){
                $("#msg").css("display","none");
            })
              $("#uname").blur(function(){
                var uname = $("#uname").val();
                $.ajax({
                  "url":"http://localhost:8080/login/ajaxreg",
                   "method":"post",
                  "data":{"uname":uname},
                  "dataType":"text",
                  "success":function(data){
                    if(data=="fail"){
                        $("#an").css("display","block");
                        ajax=false;
                    }else{
                        ajax=true;
                    }
                  }
                })

              })
            $("#form").removeAttr("onsubmit");
            $("#form").submit(function(){

                return check();
            })
          
        })
    </script>
</body>
</html>